<template lang="pug">
  .unitlist
    .company
      .c-title
        .breadcrumbs 单位列表
        .el-button.el-button--danger(type="danger" @click="goadd()") 添加单位
      .c-content
        table.table
          tr
            th(v-for = "(item,index) in titles" :key="index") {{item}}
          tr(v-for = "(item,i) in list" :id="item.id" :key="i" @click="active(item)" v-bind:class="{active:i===0}")
            td {{i+1<10?'0'+(i+1):i+1}}
            td {{item.organizationCode }}
            td
              span.organizationName {{item.organizationName }}
              input(v-model="item.organizationName" style="display:none;text-align:center;" )
            td
              span.useTime {{item.useTime }}
              el-date-picker(v-model="item.useTime" type="datetime" placeholder="选择日期时间" style="display:none;")
            td
              span.corpType {{corpTypenames[parseInt(item.corpType)] }}
              el-select(v-model="item.corpType" placeholder="单位类型" style="display:none;text-align:center;")
                el-option(label="试用" value="0")
                el-option(label="正式" value="1")
            td
              span.industryName {{item.industryName }}
              el-select(v-model="item.industryInvolved" placeholder="所属行业" style="display:none;")
                el-option(v-for="(i,j) in industrylist" :key="j" :label="i.industryName" :value="i.id" )
            td
              .update(v-if="!editable" @click="edit(item.id)") 修改
              .save(style="display:none;"  @click="updatecompany(item)") 保存
              .del(@click="del(item.id)") 删除

    .footer
      .m-pagination
        a(href="javascript:;" @click="gotopage(1)") 首页
        a(href="javascript:;" @click="gotopage(pageNow-1)") <
        a(v-for="(item,index) in pagecount" :key="index" @click="gotopage(item)" :class="{active:index+1==pageNow}" v-show="item-pageNow>=-2&&item-pageNow<3") {{index+1}}
        a(href="javascript:;" @click="gotopage(pageNow+1)") >
        a(href="javascript:;"  @click="gotopage(pagecount.length)") 末页
    add-company(:company="isShowc" @refreshList="querylist")
    index(:orCode="organizationCode" )
</template>
<script>
  //单位列表
  import {mapActions} from 'vuex'
  import addcompany from './addcompany.vue'
  import index from '../userlist/index.vue'

  let titles = '序号 单位码 单位名称 到期时间 单位性质 所属行业 操作'.split(' ')
  let corpTypenames = {1: '正式', 0: '试用'}

  export default {
    name: 'unitlist',
    data() {
      return {
        organizationCode:'',
        isShowc: false,
        editable: false,
        titles,
        pageNow: 1,
        pageSize: 9,
        list: [],
        industrylist: [],
        total: 0,
        pagecount: 0,
        Administrator: [],
        userlist: [],
        corpTypenames:corpTypenames,
        ruleForm: {
          organizationName: '',
          dateval: '',
          industryName: '',
          corpType:'',
        },
        list: {},
        rules: {
          organizationName: [
            {required: true, message: '请输入单位名称', trigger: 'blur'},
          ],
          dateval: [
            {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
          ],
          corpType: [
            {type: 'number', required: true, message: '请选择单位类型', trigger: 'change'}
          ],
          industryName: [
            {type: 'number', required: true, message: '请选择所属行业', trigger: 'change'}
          ]
        },
      }
    },
    mounted() {
      this.querylist()
      this.queryindustry()
    },
    components: {
      'add-company': addcompany,
      'index': index,
    },
    methods: {
      ...mapActions([
        'setcanpaylist',
        'canpayupdade'
      ]),
      async querylist() {
        let res = await this.$ajax.get(`xyssoManager/corp/queryAll?pageNow=${this.pageNow}&pageSize=${this.pageSize}`)
        let data = res.data
        if (data.code == 200) {
          this.list = data.data
          if(this.organizationCode===''){
            this.organizationCode = this.list[0].organizationCode
          }
          this.total = data.size
          this.pagecount = []
          if (data.pageCount === null) {
            this.pagecount = 1
          } else {
            for(let i=1;i<parseInt(data.pageCount)+1;i++){
              this.pagecount.push(i)
            }
            console.log( this.pagecount)
          }
        }
      },
      gotopage(item) {
        if (item > this.pagecount) return
        if (item < 1) return
        this.pageNow = item
        this.querylist()
      },
      goadd() {
        this.isShowc = true
        setTimeout(() => {
          this.isShowc = false
        }, 1000)
      },
      edit(id) {
        let $el = document.getElementById(id).getElementsByTagName("td");
        for (let i = 0; i < $el.length; i++) {
          if ($el[i].childNodes[1]) {
            $el[i].childNodes[0].style.display = 'none';
            $el[i].childNodes[1].style.display = 'inline-block';
          }
        }
      },
      async updatecompany(item) {
        let $el = document.getElementById(item.id).getElementsByTagName("td");
        for (let i = 0; i < $el.length; i++) {
          if ($el[i].childNodes[1]) {
            $el[i].childNodes[1].style.display = 'none';
            $el[i].childNodes[0].style.display = 'inline-block';
          }
        }
        let list = {
          id: item.id,
          organizationName: document.getElementById(item.id).getElementsByTagName("td")[2].childNodes[1].value,
          useTime: document.getElementById(item.id).getElementsByTagName("td")[3].getElementsByTagName("input")[0].value,
          corpType: item.corpType,
          industryInvolved:item.industryInvolved
        }
        console.log(list)
        let res = await this.$ajax.post('xyssoManager/corp/update', list)
        let data = res.data
        if (data.code == 200) {
          this.$message.success('修改成功')
          this.querylist()
        }
      },
      async del(id) {
        let res = await this.$ajax.post('xyssoManager/corp/delete', {
          id: id
        })
        let data = res.data
        if (data.code == 200) {
          this.$message.success('删除成功')
          this.list = this.list.filter(d => d.id != id)
        }
      },
      async queryindustry() {
        let res = await this.$ajax.get('xyssoManager/industry/queryAll')
        this.industrylist = res.data.data
      },
      active(item){
        let $el = document.querySelectorAll('tr')
        $el.forEach((item)=>{
          item.setAttribute('class','')
        })
        document.getElementById(item.id).setAttribute('class','active')
        this.organizationCode = item.organizationCode
      }

    }
  }

</script>
<style lang="stylus" scoped>
  .test
    label
      span
        color red
      > input:checked + span
        color #aaaaaa

  .unitlist
    margin 0 auto
    .company
      width 100%
      background #fff
      border 1px solid #e0e0e0
      border-radius 5px
      .c-title
        width 100%
        height 70px
        line-height 70px
        border-bottom 1px solid #e0e0e0
        .breadcrumbs
          float left
          margin-left 30px
          font-size 18px
        .el-button
          float right
          margin-right 30px
          height 30px
          line-height 30px
          padding 0 15px
          margin-top 20px
          font-size 12px
      .c-content
        padding 20px 30px 0 30px
        .table
          width 100%
          border-spacing 0
          cursor pointer
          tr
            &:hover
              background #f0f5fb
            &.active
              background #f0f5fb
          th
            height 40px
            line-height 40px
            font-size 12px
            color #999999
            text-align center
            background #f5f5f5
            &:nth-child(1)
              width 5%
            &:nth-child(2)
              width 20%
            &:nth-child(3)
              width 15%
            &:nth-child(4)
              width 15%
            &:nth-child(5)
              width 15%
            &:first-child
              text-align left
              padding-left 20px
            &:last-child
              text-align right
              padding-right 85px
          td
            height 52px
            font-size 14px
            color #686868
            line-height 52px
            border-bottom 1px solid #eee
            text-align center
            box-sizing border-box
            &:nth-child(1)
              width 5%
            &:nth-child(2)
              width 15%
            &:nth-child(3)
              width 17%
            &:nth-child(4)
              width 18%
            &:nth-child(5)
              width 15%
            &:first-child
              text-align left
              padding-left 26px
            &:last-child
              text-align right
              padding-right 30px
            .update
            .del
            .save
              display inline-block
              width 50px
              text-indent 22px
              cursor pointer
              &.update
                background url('img/update.png') no-repeat
                background-size 15px 15px
                background-position top 18px left 0
                color #3e478e
              &.del
                background url('img/del.png') no-repeat
                background-size 15px 15px
                background-position top 18px left 0
                color #e75a46
                margin-left 30px
              &.save
                background url('img/save.png') no-repeat
                background-size 15px 15px
                background-position top 18px left 0
                color #38418a

    .footer
      margin-top 30px
      margin-bottom 30px
      height 35px
      .m-pagination
        float right
        font-size 0
        a
          text-decoration none
          display inline-block
          width 32px
          height 32px
          border-radius 5px
          text-align center
          line-height 32px
          margin-right 10px
          font-size 12px
          color #999999
          background #fff
          &.active
          &:hover
            background #e75a46
            color #fff
          &:first-of-type
            width 52px
          &:last-of-type
            width 52px
            margin-right 0

</style>


